<template>
    <el-form :model="form" label-width="77px" @submit.native.prevent @keyup.enter.native="search">
        <el-row :gutter="20">
            <el-col :md="5" :sm="5" :xs="24">
                <el-form-item label="用户ID:">
                    <el-input placeholder="请输入用户ID" v-model="form.userId" />
                </el-form-item>
            </el-col>

            <el-col :md="5" :sm="5" :xs="24">
                <el-form-item label="类型:">
                    <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%;">
                        <el-option v-for="item in arr" :value="item.type" :label="item.label" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :md="5" :sm="5" :xs="24">
                <div class="ele-form-actions">
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button type="info" plain @click="reset">重置</el-button>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            form: {
                userId: undefined,
                type: undefined,
            },
            arr: [
                {
                    type: 1,
                    label: '游戏投入'
                },
                {
                    type: 2,
                    label: '游戏收入'
                },
                {
                    type: 3,
                    label: '购买会员'
                },
                {
                    type: 4,
                    label: '充值'
                },
                {
                    type: 5,
                    label: '提现'
                },
            ]
    };
},
methods: {
    search() {
        this.$emit("search", this.form);
    },
    reset() {
        this.form = {
            userId: "",
            type: "",
        };
        this.$emit("search", this.form);
    }
}
};
</script>